//聊天界面
import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtQml 2.12
import QtWebSockets 1.15

Rectangle {

    anchors.fill: parent
    color: "#ffffff"

    property var qmlList:[
        {icon:"chatIcon",qml:"ChatListPage"},
        {icon:"pengyouIcon",qml:"ChatFriendLsitPage"},
        {icon:"yingyongIcon",qml:"NewUserListPage"},
        {icon:"wenjianjiaIcon",qml:"OnPage"},
        {icon:"pengyouquanIcon",qml:"OnPage"},
        {icon:"shipinhaoIcon",qml:"NewUserListPage"}
    ]

    //左边控制栏
    Rectangle{
        id:leftStatus
        height:parent.height
        width:65


        Rectangle{

            width:parent.width
            height:110
            color:"#2e2e2e"
            Image{

                height:50
                width:50
                anchors.top: parent.top
                anchors.topMargin: 45
                anchors.horizontalCenter: parent.horizontalCenter
                source: user.headImg
            }
        }

        Frame {
            width:65
            height:parent.height-110
            anchors.bottom: parent.bottom
            background:Rectangle{

                color:"#2e2e2e"
            }
            padding:0



            ListView{
                id:menuListView
                anchors.fill: parent
                anchors.bottom: parent.bottom

                enabled: true  //子项互动
                interactive: false //禁止滚动
                highlight:Rectangle{
                    color:"#c9c7c6"
                }

                model:ListModel{
                    id:menuListViewModel
                }

                delegate:menuViewDelegate
            }

            Component{
                id:menuViewDelegate
                Rectangle{
                    id:menuViewDelegateItem
                    height:50
                    width:66
                    color: "transparent"


                    Image{
                        id:imageIcon
                        anchors.centerIn: parent
                        source: "qrc:/images/"+icon
                        height:25
                        width:25
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true

                            cursorShape: Qt.PointingHandCursor;
                            onEntered: {
                                if(imageIcon.source=="qrc:/images/"+icon+"Lv"){
                                    // console.log(imageIcon.source)
                                    return
                                }
                                imageIcon.source="qrc:/images/"+icon+"Hui"
                            }
                            onExited: {
                                console.log(imageIcon.source)

                                if(imageIcon.source=="qrc:/images/"+icon+"Lv"){
                                    // console.log(imageIcon.source)
                                    return
                                }else{
                                    imageIcon.source="qrc:/images/"+icon
                                }

                            }



                            onClicked: {

                                if(imageIcon.source=="qrc:/images/pengyouquanIconHui"){
                                    console.log("打开朋友圈")
                                    var newWindow = Qt.createComponent("FriendPage.qml").createObject(appWindoow);
                                }
                                //加载页面
                                repeater.itemAt(menuViewDelegateItem.ListView.view.currentIndex).visible=false
                                //拿到当前的index
                                console.log(index)
                                menuViewDelegateItem.ListView.view.currentIndex=index
                                var loader=repeater.itemAt(index)
                                loader.visible=true
                                loader.source=qmlList[index].qml+".qml"
                            }




                        }
                    }

                }
            }

        }

        Rectangle{
            height:180
            width:parent.width

            anchors.bottom: parent.bottom
            color:"#2e2e2e"
            Rectangle{
                height: 60
                width:parent.width
                color:"#2e2e2e"

                Image{
                    id:xcx
                    height: 30
                    width:30

                    anchors.centerIn: parent
                    source:"qrc:/images/xiaochengxu"
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor;
                    onEntered: {

                        xcx.source="qrc:/images/xiaochengxuHui"
                    }
                    onExited: {

                        xcx.source="qrc:/images/xiaochengxu"
                    }

                    onClicked: {

                    }
                }

            }

            Rectangle{
                height: 60
                width:parent.width
                anchors.centerIn: parent
                color:"#2e2e2e"
                Image{
                    id:sj
                    height: 30
                    width:30
                    anchors.centerIn: parent
                    source:"qrc:/images/shouji"
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor;
                    onEntered: {

                        sj.source="qrc:/images/shouji"
                    }
                    onExited: {

                        sj.source="qrc:/images/shoujiHui"
                    }
                    onClicked: {

                    }
                }
            }

            Rectangle{
                id:szB
                height: 60
                anchors.bottom: parent.bottom
                width:parent.width
                color:"#2e2e2e"

                Image{
                    id:sz
                    height: 25
                    width:25

                    anchors.centerIn: parent
                    source:"qrc:/images/shezhiIcon"
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor;
                    onEntered: {

                        sz.source="qrc:/images/shezhiIcon"
                    }
                    onExited: {

                        sz.source="qrc:/images/shezhiIconHui"
                    }

                    onClicked: {

                    }
                }
            }


        }
        Component.onCompleted: {

            console.log(qmlList[1].qml)
            menuListViewModel.append(qmlList)
            var loader = repeater.itemAt(0)
            loader.visible=true
            loader.source=qmlList[0].qml+".qml"
        }

    }


    //中间选择
    Rectangle{
        id:mindStatus
        height:parent.height
        width:246
        border.color: "#d6d6d6"
        anchors.left: leftStatus.right

        Rectangle{
            id:mindStatusList
            // anchors.top: serchMenuPage.bottom
            // height:parent.height-serchMenuPage.height
            anchors.fill: parent
            width:parent.width
            color:"#ffffff"
            anchors.leftMargin: 0
            anchors.rightMargin: 1
            anchors.topMargin: 0
            anchors.bottomMargin: 0

            Repeater{
                id:repeater
                model:qmlList.length


                Loader{
                    id:mindStatusLoader
                    visible: false
                    anchors.fill: parent


                }
            }




        }
    }
    //右上角状态栏控制
    Rectangle{
        height:40
        width:160
        z:99999
        anchors.right: parent.right

        RowLayout{
            spacing: 0

            Rectangle{
                height:40
                width:40
                color:"#f5f5f5"

                Button{
                    id:thumbtack
                    anchors.fill: parent
                    icon {

                        height:15
                        width:15
                        color:"#505050"
                        source: "qrc:/images/thumbtack"
                    }
                    background: Rectangle{
                        id:thumbtackRectangle
                        anchors.fill: parent
                        color:"#f5f5f5"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true

                            onEntered: {
                                thumbtack.icon.color="#454545"
                                thumbtackRectangle.color="#e2e2e2"

                            }
                            onExited: {
                                thumbtack.icon.color="#505050"
                                thumbtackRectangle.color="transparent"

                            }
                            onClicked: {
                            }
                        }
                    }



                }
            }
            Rectangle{
                height:40
                width:40
                color:"#f5f5f5"

                Button{
                    id:conceal
                    anchors.fill: parent
                    icon {

                        height:15
                        width:15
                        color:"#505050"
                        source: "qrc:/images/jianhao"
                    }
                    background: Rectangle{
                        id:concealRectangle
                        anchors.fill: parent
                        color:"#f5f5f5"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true

                            onEntered: {
                                conceal.icon.color="#454545"
                                concealRectangle.color="#e2e2e2"

                            }
                            onExited: {
                                conceal.icon.color="#505050"
                                concealRectangle.color="transparent"

                            }
                            onClicked: {
                            }
                        }
                    }



                }
            }

            Rectangle{
                height:40
                width:40
                color:"#f5f5f5"

                Button{
                    id:max
                    anchors.fill: parent
                    icon {

                        height:15
                        width:15
                        color:"#505050"
                        source: "qrc:/images/xingzhuang-juxing"
                    }
                    background: Rectangle{
                        id:maxRectangle
                        anchors.fill: parent
                        color:"#f5f5f5"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true

                            onEntered: {
                                max.icon.color="#454545"
                                maxRectangle.color="#e2e2e2"

                            }
                            onExited: {
                                max.icon.color="#505050"
                                maxRectangle.color="transparent"

                            }
                            onClicked: {
                            }
                        }
                    }



                }
            }

            Rectangle{
                height:40
                width:40
                color:"#f5f5f5"

                Button{
                    id:winowdsClose
                    anchors.fill: parent
                    icon {

                        height:10
                        width:10
                        color:"#505050"
                        source: "qrc:/images/cha"
                    }
                    background: Rectangle{
                        id:winowdsCloseRectangle
                        anchors.fill: parent
                        color:"#f5f5f5"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true

                            onEntered: {
                                winowdsClose.icon.color="#ffffff"
                                winowdsCloseRectangle.color="#fb7373"

                            }
                            onExited: {
                                winowdsClose.icon.color="#505050"
                                winowdsCloseRectangle.color="transparent"

                            }
                            onClicked: {
                                appWindoow.close()
                            }

                        }
                    }



                }
            }

        }



    }
    //聊天跳转
    Rectangle{
        id:rightLaoder
        height:parent.height
        width: (parent.width-leftStatus.width-mindStatus.width)

        anchors.right:  parent.right
        Loader{
            id:loader
            anchors.fill: parent
            source:"DefaultChatPage.qml"
            property var firendData
        }
        function laderGoto(pageUrl,user){
            //        console.log(pageUrl,user.friendUserImg,user.friendNmae)
            // if(user){
            // loader.source=pageUrl+"??"+user.friendUserImg+"??"+user.friendNmae
            //     console.log(user)
            // }else{
            //  console.log(pageUrl)
            //  loader.source=pageUrl
            // console.log(pageUrl)
            //未跳页面

            // console.log(user.friendName)
            // console.log(user.headImg)
            loader.firendData=user
            loader.source=pageUrl


            console.log("-----------------------------------------------"+"跳转成功已赋值")





        }
    }







    Component.onCompleted: {

        console.log("-----------------------------------------------------")

        console.log("已跳转至聊天页并发送查询好友列表请求")

        console.log("用户id:"+user.id)
        //查询好友列表


        console.log("-----------------------------------------------------")

        console.log(user.nickname)
        console.log("-----------------------------------------------------")

    }


}








